html做的单机游戏,基于html单机游戏.doc

基于html单机游戏

Index.html

CH3EX1: Text Arranger Version 1.0

Your browser does not support the HTML 5 Canvas.

Main.js

window.addEventListener("load", canvasApp, false);

//是否支持canvas

function canvasSupport () {

return Modernizr.canvas;

}

function canvasApp() {

//是否支持canvas

if (!canvasSupport()) {

return;

}

var theCanvas = document.getElementById("canvasOne");

var context = theCanvas.getContext("2d");

var tank=new Image();

tank.addEventListener('load', start, false);

tank.src="tanks_sheet.png"

//Background

context.fillStyle = "#CCCCCC";

context.fillRect(0, 0, theCanvas.width, theCanvas.height);

//Box

context.lineWidth=16;

context.strokeStyle = "#000000";

context.strokeRect(8,8, theCanvas.width-16, theCanvas.height-16);

//画我方tank和我方炮弹

function drawtank() {

if(gameover){

context.save();

context.fillStyle = "#000000";

context.font = "normal bold 50px normal";

context.fillText("游戏结束", 150, 150);

context.restore();

context.save();

context.fillStyle = "#000000";

context.font = "normal bold 25px normal";

context.fillText("按空格键重新开始游戏", 125, 200);

context.restore();

update();

return;

}

update();

drawScene();

render();

//画场景

function drawScene(){

for(var i=0;i<=10;i++){

for(var j=0;j<=14;j++){

colCtr=j*32+16;

rowCtr=i*32+16;

context.save();

sourceX=Math.floor(scene[i][j]%8)*32;

sourceY=Math.floor(scene[i][j]/8)*32;

context.drawImage(tank, sourceX,sourceY,32,32,colCtr,rowCtr,32,32);

context.restore();

}

}

}

//坦克更新数据

function update(){

tankmove.x=tankmove.nextx;

tankmove.y=tankmove.next