html5游戏

来源：互联网发布：python对接matlab 编辑：程序博客网时间：2024/05/22 01:25
以前同事做的html5游戏，我稍作修改了一下
<!DOCTYPE html><html><head><title>Orbz</title></head><body style="font-family:'lucida grande', tahoma, verdana, arial, sans-serif;background-color: #f7f7f7;color: #333;"><h1>OMG CALL YOUR MUM AND TELL HER YOU JUST PLAYED <del>ORBZ</del> CRAZY CUBEZ IN HTML5</h1><img id="spacebg" src="space.jpg" style="display:none" /><canvas id="canvas" width="360" height="510" style="border:1px dotted;float:left"></canvas><b>Click two orbz to swap. Click on a combo to clear. No time limit, just survive as long as possible!</b><hr /><form>    <p>Adjust paramaters here. They will be updated after your current game finishes.</p>    NumRows: <input type="text" id="numRows" value="7"/><br/>    NumColumns: <input type="text" id="numColumns" value="9"/><br/>    BoxSize: <input type="text" id="boxSize" value="80"/><br/>    SpawnRate: <input type="text" id="spawnRate" value="0.004"/><br/>    StepTime: <input type="text" id="stepTime" value="30"/><br/>    MinComboSize: <input type="text" id="minComboSize" value="3"/><br/>    ComboBonus: <input type="text" id="comboBonus" value="1.3"/> <i>(Every extra ball in the combo multiplies your score by this amount)</i><br/></form><script language="javascript">var cs = document.getElementById("canvas");var ct = cs.getContext("2d");var spacebg = document.getElementById("spacebg");var numRows;var numColumns;var boxSize;var canvasX;var canvasY;var footerY = 30;var spawnRate;var stepTime;var minComboSize;var highScore = 0;var score;var selected;var nuked;var grid;var interval;function init() {    window.clearInterval(interval);    numRows = getVal("numRows");    numColumns = getVal("numColumns");    boxSize = getVal("boxSize");    spawnRate = getVal("spawnRate");    stepTime = getVal("stepTime");    minComboSize = getVal("minComboSize");    comboBonus = getVal("comboBonus");    canvasX = numColumns * boxSize;    canvasY = numRows * boxSize;    spawnMultiplier = 1;        cs.width = canvasX;    cs.height = canvasY + footerY;    cs.addEventListener("click", doClick, false);    score = 0;    selected = [];    nuked = [];    grid = new Grid(numColumns, numRows);    interval = setInterval(step, stepTime);    }function getVal(valName) {    return parseFloat(document.getElementById(valName).value);}function Grid(x,y) {    this.grid = []    for(var i = 0; i < x; i++) {var col = [];for(var j = 0; j < y; j++) {    col.push(new Cell(i,j));}this.grid.push(col);    }        this.get = function(x,y) {var col = this.grid[x];if(col) {    var cell = col[y];    if(cell) {return cell;}}return null;    }    this.col = function(x) {var col = this.grid[x];if(col) {    return col;}return null;    }}function Cell(x,y) {    var colours = ["#900","#090","#009","#d0d","#dd0"];    this.draw = function() {if(this.hasItem) {    // ct.beginPath();    // ct.arc((x+0.5) * boxSize, ((y+0.5) * boxSize), (boxSize/2), 0, Math.PI * 2, false);    // ct.closePath();    ct.fillStyle = this.nuked ? "white" : this.colour;    // ct.fill();    ct.fillRect((x * boxSize)+1,(y*boxSize)+1,boxSize-2,boxSize-2);    if(this.selected) {ct.lineWidth = 2;ct.strokeStyle = 'rgb(240,240,240)';ct.strokeRect(x * boxSize, y * boxSize, boxSize, boxSize);    }}if(this.exploding && this.explosionSize > 0) {    ct.beginPath();    ct.arc((x+0.5) * boxSize, ((y+0.5) * boxSize), (boxSize/2) + this.explosionSize, 0, Math.PI * 2, false);    ct.closePath();    ct.lineWidth = 4;    ct.strokeStyle = 'rgb(240,240,240)';    ct.stroke();}    }        if(Math.random() < (spawnRate * spawnMultiplier)) {this.hasItem = true;this.colour = colours[Math.floor(Math.random() * colours.length)];    } else {this.hasItem = false;    }    this.x = x;    this.y = y;    this.exploding = false;}function draw(grid) {    ct.fillStyle = "black";    ct.fillRect(0,0,canvasX,canvasY)    ct.drawImage(spacebg, 0, 0);    ct.fillStyle = "#444";    ct.fillRect(0,canvasY,canvasX,footerY)    for(var i = 0; i < numColumns; i++) {for(var j = 0; j < numRows; j++) {    grid.get(i,j).draw();}    }    ct.fillStyle = "white";    ct.font = "bold 16px sans-serif";    ct.fillText("Score:"+score+" High Score:"+highScore+" Spawn Rate:"+(spawnRate*spawnMultiplier),10, canvasY + 20);    }function step() {      for(var i = 0; i < numColumns; i++)     {      var col = grid.col(i);        for(var j = numRows - 1; j >= 0; j--)     {          var cell = col[j];                    // (j <= numRows - 2) -> balls on bottom row can't fall down, so don't check if they can          if(j <= numRows -2 && cell.hasItem && !col[j+1].hasItem)         {          col[j+1].hasItem = true;          col[j+1].colour = cell.colour;          cell.hasItem = false;          cell.colour = null;          }            if(cell.exploding)         {          cell.explosionSize > 20 ? cell.exploding = false : cell.explosionSize += 3;          }      }              if(!col[0].hasItem)     {          col[0] = new Cell(i,0);      }     else     {          if(Math.random() < (spawnRate * spawnMultiplier)) {gameOver();}      }      }    draw(grid);  } function gameOver() {    alert("Game Over!");    if(score > highScore) {highScore = score;}    init();}function doClick(e) {    if (e.pageX != undefined && e.pageY != undefined) {x = e.pageX;y = e.pageY;    }    else {x = e.clientX + document.body.scrollLeft +            document.documentElement.scrollLeft;y = e.clientY + document.body.scrollTop +            document.documentElement.scrollTop;    }        x -= cs.offsetLeft;    y -= cs.offsetTop;    gridX = Math.floor(x / boxSize);    gridY = Math.floor(y / boxSize);    select(grid.get(gridX,gridY));}function select(cell) {    //if(!cell.hasItem) {return;}//debugger;    switch(selected.length) {case 0 : if(nuke(cell)) {    return;} else {if(!cell.hasItem){break;}    cell.selected = true;    selected.push(cell);}break;case 1 :if(cell == selected[0]) {cell.selected=false;selected=[];return;}cell.selected = true;selected.push(cell);swap();break;    }}function nuke(cell) {    nukeColour = cell.colour;    cell.nuked = true;    nuked = [];    nuked.push(cell);    nukeNeighbours(cell,nukeColour);    var result;    if(nuked.length >= minComboSize) {score += Math.floor(Math.pow(comboBonus,nuked.length) * 10);spawnMultiplier = 1 + (score / 700);for(var i = 0; i < nuked.length; i++) {    nuked[i].nuked = false;    nuked[i].hasItem = false;    nuked[i].exploding = true;    nuked[i].explosionSize = 0 - (i * 6);}result = true;    } else {for(var i = 0; i < nuked.length; i++) {    nuked[i].nuked = false;}cell.selected = true;result = false;    }    nuked = [];    return result;}function nukeNeighbours(cell,nukeColour) {    var x = cell.x;    var y = cell.y;    var n;    if(n = grid.get(x-1,y)) {nukeChild(n,nukeColour);}    if(n = grid.get(x+1,y)) {nukeChild(n,nukeColour);}    if(n = grid.get(x,y-1)) {nukeChild(n,nukeColour);}    if(n = grid.get(x,y+1)) {nukeChild(n,nukeColour);}}function nukeChild(cell,nukeColour) {    if(!cell || !cell.hasItem || cell.nuked || cell.colour != nukeColour) {return;}    cell.nuked = true;    nuked.push(cell);    nukeNeighbours(cell,nukeColour);}function swap() {if(selected[0].hasItem){if(selected[1].hasItem){var temp = selected[0].colour;selected[0].colour = selected[1].colour;selected[1].colour = temp;}    else{selected[1].hasItem=true;selected[0].hasItem=false;selected[1].colour = selected[0].colour;selected[0].colour=null;}}    selected[0].selected = false;    selected[1].selected = false;    selected = [];}window.onload=init;</script></body></html>
游戏的背景图片