基于html5的单机游戏基于html5的单机游戏.doc

Index.html !doctype html html lang=en head meta charset=UTF-8 titleCH3EX1: Text Arranger Version 1.0/title script src=js/modernizr-1.6.min.js/script script src=js/main.js/script /head body style=background:#ffc0cb div style=position: absolute; top: 30%; left: 30%; canvas id=canvasOne width=650 height=384 top=50px; left=50px;Your browser does not support the HTML 5 Canvas. /canvas /div /body /html 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.nexty; //左 if(keyPressList[37]==true){ //playermove.play(); //play