html5游戏

最新推荐文章于 2024-07-11 10:43:05 发布
从杰
最新推荐文章于 2024-07-11 10:43:05 发布
阅读量2k
点赞数
文章标签： html function input null border html5
以前同事做的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>
游戏的背景图片