canvas--製作坦克大戰(demo)
阿新 • • 發佈:2018-11-02
<!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>