console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>战舰游戏</title>
<style type="text/css">
body {
background: black;
}
#board {
position: relative;
width: 1024px;
height: 863px;
margin: auto;
background: red;
}
#message {
background: yellow;
position: absolute;
top: 0;
left: 0;
color: pink;
}
table {
position: absolute;
left: 173px;
top: 98px;
border-spacing: 0;
}
td {
width: 94px;
height: 94px;
background: orange;
border: 1px solid black;
text-align: center;
line-height: 94px;
font-weight: bold;
}
input {
background: rgb(152, 207, 113);
border-color: rbg(83, 175, 19);
}
form {
position: absolute;
bottom: 0;
right: 0;
padding: 15px;
background: rgb(83, 175, 19);
font-size: 1em;
}
#fire:hover {
background: pink;
}
</style>
</head>
<body onload='model.Getfocus(),model.Reset()'>
<div id='board'>
<div id='message'></div>
<table>
<tr>
<td id='00'></td>
<td id='01'></td>
<td id='02'></td>
<td id='03'></td>
<td id='04'></td>
<td id='05'></td>
<td id='06'></td>
</tr>
<tr>
<td id='10'></td>
<td id='11'></td>
<td id='12'></td>
<td id='13'></td>
<td id='14'></td>
<td id='15'></td>
<td id='16'></td>
</tr>
<tr>
<td id='20'></td>
<td id='21'></td>
<td id='22'></td>
<td id='23'></td>
<td id='24'></td>
<td id='25'></td>
<td id='26'></td>
</tr>
<tr>
<td id='30'></td>
<td id='31'></td>
<td id='32'></td>
<td id='33'></td>
<td id='34'></td>
<td id='35'></td>
<td id='36'></td>
</tr>
<tr>
<td id='40'></td>
<td id='41'></td>
<td id='42'></td>
<td id='43'></td>
<td id='44'></td>
<td id='45'></td>
<td id='46'></td>
</tr>
<tr>
<td id='50'></td>
<td id='51'></td>
<td id='52'></td>
<td id='53'></td>
<td id='54'></td>
<td id='55'></td>
<td id='56'></td>
</tr>
<tr>
<td id='60'></td>
<td id='61'></td>
<td id='62'></td>
<td id='63'></td>
<td id='64'></td>
<td id='65'></td>
<td id='66'></td>
</tr>
</table>
<form>
<input type='text' id='guess'>
<input type='button' id='fire' onclick="model.ParseGuess(),model.Getfocus()" value='开火!'>
<input type="submit" id='reset'onclick='model.Reset()'value='重新开始'>
</form>
</div>
<script>
var guess = document.getElementById('guess')
var message=document.getElementById('message')
var model={
attack:0,
numships:3,
shipssunk:0,
ships:[{locations:[0,0,0],hits:['','','']},
{locations:[0,0,0],hits:['','','']},
{locations:[0,0,0],hits:['','','']}],
ParseGuess:function(){
var alphabet=['A','B','C','D','E','F','G','a','b','c','d','e','f','g']
if(guess.value.length===null||guess.value.length!==2){
console.log('请输入正确的值')}
else{var first = guess.value.charAt(0)
var row = alphabet.indexOf(first)
row = row>6?(row-7):row
var column=guess.value.charAt(1)
if(isNaN(row)||isNaN(column)){console.log('请输入正确的值')}
else if(row<0||row>6||column<0||column>6){console.log('请输入正确的值')}
else{this.attack++
this.Gofire(row+column)}}},
Gofire:function(guess){
var tf=document.getElementById(guess)
for(var i=0;i<3;i++){
var ship=this.ships[i]
var index=ship.locations.indexOf(guess)
if(index>=0){
message.innerHTML='<h1>你成功击中敌方战舰</h1>'
tf.innerHTML='HIT'
ship.hits[index]='hit'
if(this.Over()==9){
message.innerHTML='<h1>You Win the Game,You Are the Champions</h1>'
alert('你一共攻击了'+this.attack+'次')
}
return}
else{message.innerHTML='<h1>你未击中敌方战舰</h1>'
tf.innerHTML='MISS' }}},
Getfocus:function(){
guess.value=''
guess.onkeypress=this.Keypress},
Keypress:function(e){
console.log(e)
var fire = document.getElementById('fire')
if(e.keyCode===13)
{
fire.click()
return false
}
},
Over:function(){
this.shipssunk=0
for(var i=0;i<3;i++){
var ship=this.ships[i]
for(var j=0;j<3;j++){
if(ship.hits[j]==='hit')
{
this.shipssunk++
}
}
}
return this.shipssunk
},
Reset:function(){
this.Shipslocations()
this.Ship()
},
Shipslocations:function(){
var locations
for(var i=0;i<this.numships;i++){
do{locations=this.Ship()}
while(this.Collision(locations))
this.ships[i].locations=locations
}
},
Ship:function(){
var direction=Math.floor(Math.random()*2)
var col,row
if(direction===1){
row=Math.floor(Math.random()*3)
col=Math.floor(Math.random()*4)
}
else{
row=Math.floor(Math.random()*4)
col=Math.floor(Math.random()*3)
}
var shipslocations=[]
for(var i=0;i<3;i++){
if(direction===1){
shipslocations.push(row+''+(col+i))
}
else{
shipslocations.push((row+i)+''+col)
}
}
return shipslocations
},
Collision:function(locations){
for(var i=0;i<3;i++){
var ship=this.ships[i]
for(var j=0;j<3;j++){
if(ship.locations.indexOf(locations[j])>=0){
return true
}
}
}
return false
}
}
</script>
</body>
</html>