版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36818386/article/details/82778359
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
canvas{
display: block;
border: 1px solid #000;
}
body
{
background-color: rebeccapurple;
}
</style>
</head>
<body>
<canvas width="1200" height="600" id="canvas"></canvas>
<script type="text/javascript">
//得到标签
var canvas = document.getElementById("canvas");
//创建一个2d平面画布
var ctx = canvas.getContext("2d");
//*********************↓↓↓↓↓↓↓↓↓↓游戏准备↓↓↓↓↓↓↓↓↓↓*********************
//游戏所有图片列表
var images = {
"tank" : "images/tank.bmp",
"zidan" : "images/zidan.png",
"zhuantou" : "images/zhuantou.bmp"
};
//游戏资源对象
var R = {};
//已经加载完毕的图片数量
var count = 0;
//遍历images对象，给R创建相同的键名
for(var k in images){
R[k] = new Image();
R[k].src = images[k];
R[k].onload = function(){
//计数，统计已经加载完毕的图片数量
count++;
//如果count等于了images对象键的个数，说明所有图片加载完毕了
if(count == Object.keys(images).length){
//开始游戏
start();
}
}
}
//*********************↑↑↑↑↑↑↑↑↑↑游戏准备↑↑↑↑↑↑↑↑↑↑*********************
//*********************↓↓↓↓↓↓↓↓↓↓定时器↓↓↓↓↓↓↓↓↓↓*********************
//演员数组
var actorsArr = [];
//帧编号
var f = 0;
//开始游戏
function start(){
setInterval(function(){
//清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
//显示帧编号，方便测试
f++;
ctx.font = "30px 黑体";
ctx.fillText(f , 10 , 30);
//遍历所有演员调用它们的update和render方法
for(var i = 0 ; i < actorsArr.length ; i++){
actorsArr[i].update();
actorsArr[i].render();
}
},20);
}
//*********************↑↑↑↑↑↑↑↑↑↑定时器↑↑↑↑↑↑↑↑↑↑*********************
//********************************************************
//********************************************************
//********************************************************
//*********************开始堆放各种类*********************
//********************************************************
//********************************************************
//********************************************************
function Tanke()
{
this.x = 300;
this.y = 500;
this.step = 0;
this.direction = 0;
this.isDong = false;
this.speed = 3;
actorsArr.push(this);
}
Tanke.prototype.update = function ()
{
if(this.isDong)
{
if(this.direction == 0)
{
var col = Math.floor(this.x / 32);
var row = Math.floor(this.y / 32);
if(bj.code[row][col] == 0)
{
this.y -= this.speed;
}
}
else if(this.direction == 1)
{
this.x += this.speed;
}
else if(this.direction == 2)
{
this.y += this.speed;
}
else if(this.direction == 3)
{
this.x -= this.speed;
}
this.step = this.step == 0 ? 1 : 0;
}
};
Tanke.prototype.render = function ()
{
ctx.drawImage(R.tank, 6 * 28 + this.step * 28, this.direction * 28, 28, 28, this.x,this.y, 28*2, 28*2);
};
Tanke.prototype.go = function(direction){
this.direction = direction;
this.isDong = true;
};
Tanke.prototype.ting = function(direction){
this.isDong = false;
};
function Bullet(x , y , direction){
this.x = x;
this.y = y;
this.direction = direction;
this.speed = 5;
actorsArr.push(this);
}
Bullet.prototype.render = function(){
ctx.drawImage(R.zidan , 100 * this.direction , 0 , 100 , 100 , this.x , this.y , 20 , 20);
};
Bullet.prototype.update = function(){
if(this.direction == 0)
{
this.y -= this.speed;
}
else if(this.direction == 1)
{
this.x += this.speed;
}
else if(this.direction == 2)
{
this.y += this.speed;
}
else if(this.direction == 3)
{
this.x -= this.speed;
}
};
function Beijing(){
this.code = [
[0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2],
[0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2],
[0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2],
[0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2],
[0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2],
[0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2],
[0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2],
[0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2],
[0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2],
[0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2,0,0,0,0,0,1,1,1,2,2,2,2],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,00,0,0,0,0,0,0,0,0,0],
]
actorsArr.push(this);
}
Beijing.prototype.update = function(){
};
Beijing.prototype.render = function(){
for(var i = 0 ; i < this.code.length ; i++){
for(var j = 0 ; j < this.code[i].length ; j++){
if(this.code[i][j] != 0){
ctx.drawImage(R.zhuantou , 32 * (this.code[i][j] - 1) , 0 , 32 , 32 , 32 * j , 32 * i , 32 , 32);
}
}
}
};
var bj = new Beijing();
var tank = new Tanke();
window.onkeydown = function(e){
if(e.keyCode == 37){
tank.go(3);
}else if(e.keyCode == 38){
tank.go(0);
}else if(e.keyCode == 39){
tank.go(1);
}else if(e.keyCode == 40){
tank.go(2);
}else if(e.keyCode == 32){
new Bullet(tank.x + 28, tank.y + 28 , tank.direction);
}
}
window.onkeyup = function(e){
tank.ting();
}
</script>
</body>
</html>